[HTML/CSS] 텍스트 수직, 세로방향으로 중앙 정렬하는 다양한 방법 알아보기

웹페이지에서 텍스트를 세로로 중앙정렬 하기 위한 방법은 어떤게 있을까요? 몇가지 방법이 있겠지만 그 중에서 어떤 방법이 가장 적합할지 알아보고자 합니다.

# css 텍스트 세로방향 정렬방법

만약 텍스트가 아닌 이미지라면 display의 값이 inline으로 vertical-align을 사용해 해결할 수 있겠습니다. 아래와 같이 말이죠...

위와 같이 값을 넣어주면 세로방향으로 정렬이 됩니다. 물론 위 또는 아래에 적당판 margin값을 이용할 수도 있습니다. 이때는 display 속성값은 block 또는 inline-block으로 되어 있어야합니다. 만약 텍스트인 경우는 세로정렬을 어떻게 해야할까요?



# 텍스트는 어떻게 세로로 정렬을 할 수 있을까 텍스트는 기본적으로 display속성값이 inline이고 height가 정해지지 않았기 때문에 이미지와는 다른 방법이 필요합니다. 물론 이를 해결하기 위한 다양한 방법이 존재합니다. 이 모든 방법들 중에서 가장 대표적인 방법은 아래와 같습니다. 하나하나 확인해보세요.


! 첫 번째, line-height를 사용하기line-height를 사용하면 가장 쉽게 중앙 정렬할 수 있습니다. 예를들어 height가 100px인 경우 동일하게 line-height값을 100px을 설정합니다.

위 코드는 아래와 같이 출력됩니다.

TEST

보시는 것처럼 세로 정렬이 완벽합니다!! 하지만 한가지 알아둘 점이 있다면 텍스트가 한줄인 경우에만 가능하다는 점입니다. 만약 텍스트가 두 줄 이상이라면??

! 만약 두 줄 또는 그 이상인 경우 해결방법
이때는 위 예제를 기준으로한다면 span 태그안에 또 다른 태그를 넣고 line-height 값을 재설정하는 방법이 있습니다~ 즉 아래와 같이 코드를 사용합니다.

이처럼 span 안에 다른 태그 요소를 추가하고 이 요소에 다른 line-line-height 값을 설정하는 방법입니다.


! 두 번째, padding값을 적절하게 넣는 방법이 방법 역시 매우 간단합니다. 해당 요소의 위 또는 아래에 padding값을 적절하게 적용하는 방법입니다. 하지만 정확히 중간을 맞추는 것이 매우 어렵겠죠? 퍼센트는 상대값이기 때문에 폰트 크기의 정확한 값을 사용하기는 어려우나 세로로 정렬을 간편하게 적용할 수 있죠.


! 해당 텍스트에 block 적용 후 margin 속성값을 사용위의 padding과 달리 이번에는 margin 값을 적당하게 추가하여 세로정렬을 가능하게 하는 방법입니다.

margin-top: 49%;
margin-top: 50%;

! top 50% 적용 후 margin-top 마이너스 값 적용하기

마지막으로 ... 해당 텍스트를 block으로 묶은 후 부모요서에 position: relative를 사용후 자신에게는 상하 조절하는 top 또는 bottom 값을 지정하는 방법입니다.

# 마치면서

세로 정렬을 위한 다양한 방법을 알아보았습니다. 세로 정렬을 하기 위해서는 세로의 값을 아는 경우에는 쉽게 padding, margin으로 조절하여 사용할 수 있지만 정확한 값을 모른다면 상대적인 단위의 50% 등을 사용하여 적용하는 것이 가능합니다.